import { Button, Drawer, Empty,  Space, message } from 'antd'
import { CheckSquareOutlined, CloseSquareOutlined } from '@ant-design/icons'
import { Avatar, Card } from 'antd'
import './index.scss'
import { getBlogStatusModifyAPI } from '@/api/blog'
import { getMessageAddAPI } from '@/api/user'

const { Meta } = Card
 
const DrawerAgain = ({ open, closeDrawer, checkBlog, onUpdate }) => {
    // eslint-disable-next-line react/prop-types
    const onClose = (value) => {
        closeDrawer(value)
    }
    // 博客审核通过
    const passCheck = async () => {
        const res = await getBlogStatusModifyAPI({ id: checkBlog.id,state: "已发布" })
        if (res.code === 1) {
            message.success('审核完成!')
            onUpdate({checkBlog})
            onClose()
            await getMessageAddAPI({
                userId: checkBlog.userId,
                text: "您的博客审核已通过。"
            })
        } else {
            message.error(res.msg)
        }
    }
    // 博客审核不通过，下架
    const unPassCheck = async () => {
        const res = await getBlogStatusModifyAPI({ id: checkBlog.id, state: "下架" })
        if (res.code === 1) {
            message.success('审核完成!')
            onUpdate({checkBlog})
            onClose()
            await getMessageAddAPI({
                userId: checkBlog.userId,
                text: "抱歉，您的博客审核不通过，已被下架。"
            })
        } else {
            message.error(res.msg)
        }
    }
    return (
        <div>
            <Drawer
                title="博客详情"
                width={700}
                onClose={() => onClose(false)}
                open={open}
                extra={
                <Space>
                    <Button onClick={() => onClose(false)}>取消</Button>
                    <Button type="primary" onClick={() => onClose(false)}>
                    确认
                    </Button>
                </Space>
                }
            >
                {Object.keys(checkBlog) ? 
                <Card className="blog-content-box">
                    <div className="content-header">
                        <h1 className="title">{checkBlog.title}</h1>
                        <Meta
                        avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
                        title={`作者名：${checkBlog.author}`}
                        description={`发布时间：${checkBlog.createTime}`}
                    />
                    </div>
                    <div className="content-main" dangerouslySetInnerHTML={{ __html: checkBlog.text }}>
                        
                    </div>
                    <div className="content-footer">
                        <Button 
                            type='primary'
                            icon={<CheckSquareOutlined />}
                            onClick={passCheck}>
                                审核通过
                        </Button>
                        <Button 
                            type='primary'
                            icon={<CloseSquareOutlined />}
                            onClick={unPassCheck}>
                                审核不通过
                        </Button>
                    </div>
                </Card>
                : <div>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </div> }
            </Drawer>
        </div>
    )
}
export default DrawerAgain
